<template>
  <div style="height: 100%; width: 100%; background-color: black">
    <div class="body" ref="appRef">
      <div class="header">
        <h1>机台运行状态看板</h1>
        <div class="showTime">
          <span>{{ date }}</span>
        </div>
        <img
          style="position: absolute; left: 22px; top: 32px; display: inline-block; width: auto; height: 38px"
          src="../../../assets/images/favorite3_white.png" />
        <div style="position: fixed; right: 7px; top: 16px; cursor: pointer; color: lightgray" @click="close">
          <Icon type="md-close" size="32" />
        </div>
      </div>
      <div class="jtbox">
        <div class="bg1" style="padding: 8px 20px; font-size: 21px; text-align: center; letter-spacing: 3px">
          <span>空压机：排气压力{{ pyData.kyj.pqyl }}MPa ;&emsp;&emsp;排气温度{{ pyData.kyj.pqwd }}℃</span>
          <span>冰水机：回水温度{{ pyData.bsj.hswd }}℃ ;&emsp;&emsp;出水温度{{ pyData.bsj.cswd }}℃</span>
          <span>
            恒压系统：冰水压力{{ pyData.hyxt.bsyl }}MPa ;&emsp;&emsp;常温水压力{{ pyData.hyxt.cwsyl }}Mpa ;&emsp;&emsp;机台水压力{{
              pyData.hyxt.jsyl
            }}Mpa
          </span>
        </div>
        <div
          class="tips"
          v-for="(i, index) in listJtm"
          :key="index"
          v-if="position.get(i.kblJtbh)"
          :style="{ left: position.get(i.kblJtbh).left, top: position.get(i.kblJtbh).top }">
          <div :class="'state ' + i.kblColor">{{ i.kblJtbh }}</div>
          <div class="info">
            <!--  异常停机图标-->
            <Icon
              class="yichang"
              v-if="i.kblJps > 5"
              :custom="mapTjxx.get('异常停机').icon"
              :color="mapTjxx.get('异常停机').color"
              color="red"
              size="24" />
            <!--  首件单-->
            <Icon
              v-if="i.firstPartState === 0 || i.firstPartState === 3"
              :custom="mapTjxx.get('首件NG').icon"
              :color="mapTjxx.get('首件NG').color"
              size="24" />
            <Icon v-if="i.firstPartState === 1" :custom="mapTjxx.get('首件中').icon" :color="mapTjxx.get('首件中').color" size="24" />
            <!--  不良预警-->
            <Icon v-if="i.kblBlflag" :custom="mapTjxx.get('不良预警').icon" :color="mapTjxx.get('不良预警').color" size="24" />
            <!--  超标准成型时间-->
            <Icon v-if="i.kblCxsjflag == 1" :custom="mapTjxx.get('超标准成型时间').icon" :color="mapTjxx.get('超标准成型时间').color" size="25" />
            <!--  超标准工时       v-if="i.kblWaring==1"-->
            <Icon v-if="i.kblWaring == 1" :custom="mapTjxx.get('超标准工时').icon" :color="mapTjxx.get('超标准工时').color" size="24" />
            <!--  换单        v-if="i.kblHdflag==1"-->
            <Icon custom="iconfont icon-liuzhuan" v-if="i.kblHdflag == 1" color="#ff8100" size="24" />
          </div>
          <div class="popper__arrow"></div>
        </div>
      </div>
      <dv-decoration-3 style="width: 100%; height: 20px" />
      <div class="mainbox" style="height: 320px">
        <div class="column">
          <box1 title="机台生产效率">
            <v-chart :options="blvOption" style="width: 100%; height: 250px" />
          </box1>
        </div>
        <div class="column">
          <box1 style="margin-left: 20px" title="机台运行状态">
            <div style="display: flex">
              <div class="jtkjl">
                <div class="title">
                  <span>机台开机率</span>
                </div>
                <div style="width: 150px; height: 150px; padding: 20px 0px; text-align: center">
                  <i-circle :percent="kjv" :stroke-color="sortColors" :trail-width="8" :stroke-width="9">
                    <span class="demo-circle-inner" style="font-size: 20px; color: yellow">{{ kjv }}%</span>
                  </i-circle>
                  <!-- <el-progress type="circle" :percentage="kjv" :width="120" color="#d11966" :stroke-width="12"></el-progress> -->
                </div>
              </div>

              <div style="flex: 0 0 400px; width: 400px; height: 250px; margin-left: 20px">
                <v-chart :options="option1" style="width: 400px; height: 250px"></v-chart>
              </div>

              <div
                style="
                  display: grid;
                  grid-template-columns: 215px 215px 215px;
                  gap: 15px 5px;
                  grid-template-rows: 50px 50px 50px 50px;
                  margin: 0 20px;
                ">
                <div class="exp" v-for="item in mapColor">
                  <div class="title">{{ item.name }}</div>
                  <div class="expbox">
                    <span>{{ item.count }}</span>
                    <Icon custom="iconfont icon-zhusuji-1" :color="item.color" size="36" />
                  </div>
                </div>
                <div class="exp" v-for="item in mapTjxx">
                  <div class="title">{{ item[1].name }}</div>
                  <div class="expbox">
                    <span>{{ item[1].count }}</span>
                    <Icon :custom="item[1].icon" :color="item[1].color" size="32" />
                  </div>
                </div>
              </div>
            </div>
          </box1>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import draw from '@/mixins/drawMixin'
import box1 from '../box1' // 引入box1组件的代码，确保路径正确。
import BoardService from '@/api/board/board'
import PythonService from '@/api/python/python'
const sortColors = ['red', 'orange', 'yellow', 'blue', 'green']
const r1 = '560px'
const r2 = '420px'
const r3 = '300px'
const r4 = '160px'
const c1 = '1840px'
const position = new Map([
  ['A01', { left: '1610px', top: r1 }],
  ['A02', { left: '1492px', top: r1 }],
  ['A03', { left: '1376px', top: r1 }],
  ['A04', { left: '1260px', top: r1 }],
  ['A05', { left: '1144px', top: r1 }],
  ['A06', { left: '1026px', top: r1 }],
  ['A07', { left: '910px', top: r1 }],
  ['A08', { left: '792px', top: r1 }],
  ['A09', { left: '674px', top: r1 }],
  ['A10', { left: '556px', top: r1 }],
  ['A11', { left: '438px', top: r1 }],
  ['A12', { left: '320px', top: r1 }],
  ['A13', { left: '204px', top: r1 }],
  ['A14', { left: '86px', top: r1 }],
  ['B05', { left: '1144px', top: r2 }],
  ['B06', { left: '1026px', top: r2 }],
  ['B07', { left: '910px', top: r2 }],
  ['B08', { left: '792px', top: r2 }],
  ['B09', { left: '674px', top: r2 }],
  ['B10', { left: '556px', top: r2 }],
  ['C01', { left: '1610px', top: r3 }],
  ['C02', { left: '1492px', top: r3 }],
  ['C03', { left: '1376px', top: r3 }],
  ['C04', { left: '1260px', top: r3 }],
  ['C05', { left: '1144px', top: r3 }],
  ['C06', { left: '1026px', top: r3 }],
  ['C07', { left: '910px', top: r3 }],
  ['C08', { left: '792px', top: r3 }],
  ['C09', { left: '674px', top: r3 }],
  ['C10', { left: '556px', top: r3 }],
  ['C11', { left: '438px', top: r3 }],
  ['C12', { left: '320px', top: r3 }],
  ['C13', { left: '204px', top: r3 }],
  ['C14', { left: '86px', top: r3 }],
  ['D01', { left: '1610px', top: r4 }],
  ['D02', { left: '1492px', top: r4 }],
  ['D03', { left: '1376px', top: r4 }],
  ['D04', { left: '1260px', top: r4 }],
  ['D05', { left: '1144px', top: r4 }],
  ['D06', { left: '1026px', top: r4 }],
  ['D07', { left: '910px', top: r4 }],
  ['D08', { left: '792px', top: r4 }],
  ['D09', { left: '674px', top: r4 }],
  ['D10', { left: '556px', top: r4 }],
  ['D11', { left: '438px', top: r4 }],
  ['D12', { left: '320px', top: r4 }],
  ['D13', { left: '204px', top: r4 }],
  ['D14', { left: '86px', top: r4 }],
  ['E01', { left: c1, top: '560px' }],
  ['E02', { left: c1, top: '480px' }],
  ['E03', { left: c1, top: '400px' }],
  ['E04', { left: c1, top: '320px' }],
  ['E05', { left: c1, top: '240px' }],
  ['E06', { left: c1, top: '160px' }],
  ['Z01', { left: '385px', top: r3 }],
  ['Z02', { left: '385px', top: r2 }],
  ['Z03', { left: '230px', top: r3 }],
  ['Z04', { left: '230px', top: r2 }],
  ['Z05', { left: '86px', top: r3 }],
  ['Z06', { left: '86px', top: r2 }],
])
export default {
  name: 'BoardMachine',
  mixins: [draw],
  components: { box1 },
  data() {
    return {
      mapColor: {
        G: { name: '正常生产', count: 0, color: 'green' },
        Y: { name: '换模/试模\n/调机/换料', count: 0, color: 'yellow' },
        R: { name: '修模/机修/停\n机/待料/保养', count: 0, color: 'red' },
        V: { name: '品质', count: 0, color: 'violet' },
        W: { name: '工单等待', count: 0, color: 'white' },
      },
      mapTjxx: new Map([
        ['异常停机', { name: '异常停机', count: 0, color: 'red', icon: 'iconfont icon-yichangtingji' }],
        ['首件中', { name: '首件中', count: 0, color: 'mediumpurple', icon: 'iconfont icon-shoujianjian' }],
        ['首件NG', { name: '未做首件\n/首件NG', count: 0, color: 'red', icon: 'iconfont icon-shoujianjian' }],
        ['不良预警', { name: '不良预警', count: 0, color: 'red', icon: 'iconfont icon-buliangpin' }],
        ['超标准工时', { name: '超标准工时', count: 0, color: 'orange', icon: 'iconfont icon-task-management-fill' }],
        ['超标准成型时间', { name: '超标准\n成型时间', count: 0, color: 'orange', icon: 'iconfont icon-xiangyingchaoshijiankong' }],
        ['换单', { name: '2小时内\n换单提示', count: 0, color: '#ff8100', icon: 'iconfont icon-liuzhuan' }],
      ]), //统计信息，用于显示在底部
      listJtm: [],
      listJtmJtbh: [],
      position: position,
      kjv: 0,
      sortColors: sortColors,
      datazq: { sclSecond: [] },
      blvOption: {
        backgroundColor: 'rgba(62, 111, 146,0.2)',
        dataset: {
          dimensions: ['rzmJtbh', 'scRate', 'itm_custwldm'],
          source: [],
        },
        xAxis: {
          splitLine: {
            show: false,
          },
        },
        grid: {
          top: 20,
          right: 200,
          bottom: 20,
          left: 50,
        },
        yAxis: {
          type: 'category',
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLabel: {
            color: 'white',
            fontSize: '18',
          },
          max: 2, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              color: function (param) {
                return sortColors[param.dataIndex]
              },
              borderRadius: [20, 20, 0, 0],
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              formatter: '{@scRate} % ',
              fontSize: 20,
              color: 'white',
            },
          },
        ],
        legend: {
          show: false,
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
      }, //不良率统计图配置项
      dataset: [],
      date: '',
      pyData: {
        kyj: {
          pqyl: '--',
          pqwd: '--',
        },
        bsj: {
          cswd: '--',
          hswd: '--',
        },
        hyxt: {
          bsyl: '--',
          cwsyl: '--',
          jsyl: '--',
        },
      },
    }
  },
  mounted() {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.creatIntvers()
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteLeave(to, from, next) {
    if (this.timerJt) clearInterval(this.timerJt)
    if (this.timer) clearInterval(this.timer)
    if (this.timer30) clearInterval(this.timer30)
    next()
  },
  computed: {
    option1() {
      return {
        backgroundColor: 'rgba(62, 111, 146,0.2)',
        dataset: {
          dimensions: ['date', 'count'],
          source: this.dataset,
        },
        tooltip: {
          //鼠标hover
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          borderWidth: 0,
          top: 45,
          left: 30,
          bottom: 25,
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              color: '#fff',
              interval: 0,
              formatter: (value) => {
                return this.$moment(value).format('MM-DD') // 格式化时间轴标签为小时:分钟格式
              },
              //rotate: 15,
            },
            nameTextStyle: {
              color: '#ffffff',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            max: this.listJtm.length,
          },
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#83bff6', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#188df0', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#83bff6', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#188df0', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            barWidth: '40%', // 柱状图的宽度，根据需要调整
          },
        ],
      }
    },
  },
  methods: {
    creatIntvers() {
      // 获取机台
      BoardService.getMachines().then((res) => {
        if (res.code === 200) {
          this.listJtmJtbh = res.data.map((a) => a.jtmJtbh)
          this.get_info()
          // 定时更新机台状态信息
          if (this.timerJt) clearInterval(this.timerJt)
          this.timerJt = setInterval(() => {
            this.get_info()
          }, 60000)
        } else {
          alert(res.msg)
        }
      })
      //显示时间
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.date = this.$moment().format()
      }, 1000)
      //显示时间
      if (this.timer30) clearInterval(this.timer30)
      const fp = () => {
        PythonService.getCompressor().then((res) => {
          this.pyData.kyj.pqyl = res.groupData[0].data[0].value // 排气压力
          this.pyData.kyj.pqwd = res.groupData[1].data[0].value // 排气压力
        })
        PythonService.getIce().then((res) => {
          this.pyData.bsj.hswd = res.groupData[0].data[1].value
          this.pyData.bsj.cswd = res.groupData[0].data[2].value
        })
        PythonService.getWater().then((res) => {
          this.pyData.hyxt.bsyl = parseFloat(res[0].groupData[0].data[4].value).toFixed(2)
          this.pyData.hyxt.cwsyl = parseFloat(res[2].groupData[0].data[4].value).toFixed(2)
          this.pyData.hyxt.jsyl = parseFloat(res[1].groupData[0].data[4].value).toFixed(2)
        })
      }
      fp()
      this.timer30 = setInterval(fp, 30000)
    },
    get_info(e) {
      BoardService.getMachineBoardBaseInfo().then((res) => {
        if (res.code === 200) {
          // 初始化
          for (let o in this.mapColor) {
            this.mapColor[o].count = 0
          }
          this.mapTjxx.forEach((a) => (a.count = 0)) // 初始化统计信息

          this.groupJtm = { A: [], B: [], C: [], D: [], E: [], Z: [] }
          this.rowJtm = []
          // 计算数量
          this.listJtm = res.data.map((a) => {
            const tag = a.kblBbdm
            this.mapColor[a.kblColor].count++
            this.groupJtm[tag].push(a)
            if (a.kblJps > 5) {
              this.mapTjxx.get('异常停机').count++ // 机台停机超5分钟
            }
            if (a.kblWaring) {
              this.mapTjxx.get('超标准工时').count++ //超出标准工时
            }
            if (a.kblHdflag) {
              this.mapTjxx.get('换单').count++
            }
            if (a.kblCxsjflag != 0) {
              this.mapTjxx.get('超标准成型时间').count++
            }
            if (a.kblBlflag) {
              this.mapTjxx.get('不良预警').count++
            }
            // 首件状态计数
            if (a.firstPartState === 0 || a.firstPartState === 3) {
              this.mapTjxx.get('首件NG').count++
            }
            if (a.firstPartState === 1) {
              this.mapTjxx.get('首件中').count++
            }
            return a
          })
          // this.kjv = parseFloat(((this.mapColor['G'].count / this.listJtm.length) * 100).toFixed(2)) // 开机率计算公式：开机台数/总台数*100% 保留两位小数点，四舍五入。
          return
        } else {
          alert(res.msg)
        }
      })

      BoardService.getSituationView('work_1').then((res) => {
        this.blvOption.dataset.source = res.sclSecond.map((a) => {
          a.scRate = a.scRate > 1 ? 100 : (a.scRate * 100).toFixed(1)
          return a
        })
        this.kjv = (res.kjv.kjv * 100).toFixed(1)
      })

      BoardService.listMachineStartRate({ dayNumber: 7, jtmWorkShop: 'work_1' }).then((res) => {
        this.dataset = res
      })
    },
    close() {
      this.$router.go(-1)
    },
  },
}
</script>
<style scoped lang="scss">
@import '../index.scss';
.column > div {
  margin: 8px 0px;
  overflow: hidden;
}
.jtkjl {
  border: 1px solid #1aecec52;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    color: cyan;
    font-size: 18px;
    text-align: center;
    background: #145295;
    padding: 10px 30px;
    width: 100%;
  }
}
.jtbox {
  height: 660px;
  background: url('~@/assets/images/board/machine.png') no-repeat center center / 100% 100%;

  .bg1 {
    font-size: 24px;
    background: #30313396;
    color: #fff;
    padding: 5px;
    > span {
      padding: 0 10px;
    }
  }

  .tips {
    display: flex;
    position: absolute;
    @extend .bg1;
    border-radius: 15px;
    margin-left: 12px;
    width: 64px;
    .popper__arrow {
      position: absolute;
      display: block;
      border-style: solid;
      border-width: 10px;
      left: -9px;
      top: 15px;
      border-color: transparent;
      border-right-color: #30313396;
      border-left-width: 0;
      &:after {
        content: ' ';
        border-width: 5px;
        bottom: -5px;
        left: 1px;
        border-right-color: #30313396;
        border-left-width: 0;
        position: absolute;
      }
    }
    .state {
      writing-mode: vertical-rl;
      text-orientation: upright;
      font-size: 18px;
      background: green;
      border-radius: 14px;
      padding: 2px 1px;

      &.Y {
        background-color: yellow;
        color: red;
      }

      &.G {
        background-color: green;
      }

      &.R {
        background-color: red;
        color: yellow;
      }

      &.P {
        background-color: yellow;
        color: red;
      }
      &.V {
        background-color: #a349a4;
      }
      &.N {
        background-color: rgb(211, 195, 207);
        color: rgb(245, 22, 189);
      }

      &.W {
        background-color: rgb(245, 245, 245);
        color: mediumblue;
      }
    }
    .info {
      margin-left: 4px;
      display: flex;
      flex-direction: column;
    }

    .yichang {
      -webkit-animation: scaleout 1.2s infinite ease-in-out;
      animation: scaleout 0.8s infinite ease-in-out;
    }
    .yichang:hover {
      -webkit-animation: none;
      animation: none;
    }
    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(1);
      }
      100% {
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
    }
    @keyframes scaleout {
      0% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
      100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
    }
  }
}
.exp {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #ffba00;
  padding: 5px;
  span {
    margin-right: 4px;
  }
  .expbox {
    padding: 5px 12px;
    background: #134569;
    margin-left: 10px;
    width: 90px;
    text-align: center;
  }
  .title {
    white-space: pre;
    width: 105px;
  }
}
.showtime {
}
</style>
